<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/images/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>awescnb</title>
    <style>
      .hello {
        margin: 80px 0 0;
        text-align: center;
        font-size: 32px;
        color: #333;
      }
      .theme-name {
        color: #1b86f9;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <h1 class="hello">Hi <span class="theme-name">Geek</span></h1>
      <aw-navlist></aw-navlist>
      <aw-footer></aw-footer>
    </div>

    <template id="aw-footer">
      <footer>acnblogs @ <span></span></footer>

      <style>
        footer {
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          text-align: center;
          padding: 20px 0;
          background: #f8f8f8;
          color: #555;
        }
      </style>
    </template>

    <template id="aw-navlist">
      <div class="page-list"></div>
      <style>
        .page-list {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          width: 532px;
          margin: 40px auto 0;
        }
        .page-list > a {
          padding: 8px;
          text-decoration: none;
          border-radius: 4px;
          color: #555;
        }
        .page-list > a:hover {
          color: darkblue;
          background-color: #f3f2f2;
        }
      </style>
    </template>

    <script>
      HTMLElement.prototype.appendHTML = function (html) {
        var divTemp = document.createElement('div'),
          nodes = null,
          fragment = document.createDocumentFragment()
        divTemp.innerHTML = html
        nodes = divTemp.childNodes
        for (var i = 0, length = nodes.length; i < length; i += 1) {
          fragment.appendChild(nodes[i].cloneNode(true))
        }
        this.appendChild(fragment)
        nodes = null
        fragment = null
      }

      class AwFooter extends HTMLElement {
        constructor() {
          super()
          // var shadow = this.attachShadow({ mode: 'closed' })
          const templateElem = document.getElementById('aw-footer')
          const content = templateElem.content.cloneNode(true)
          content.querySelector('span').innerText = new Date().getFullYear()
          this.appendChild(content)
        }
      }

      class NavList extends HTMLElement {
        constructor() {
          super()
          const templateElem = document.getElementById('aw-navlist')
          this.content = templateElem.content.cloneNode(true)
          this._init()
          this.render()
        }

        _init() {
          this.createPageNav()
        }

        createPageNav() {
          function createNavItem(item) {
            return `<a href="${item.url}"><div>${item.title}</div></a>`
          }

          const pageList = [
            {
              title: '🏠 首页',
              url: '/templates/home.html',
            },
            {
              title: '📃 富文本',
              url: '/templates/post1.html',
            },
            {
              title: '📃 Markdown',
              url: '/templates/post.html',
            },
            {
              title: '📃 tinymce5',
              url: '/templates/tinymce5.html',
            },
            {
              title: '📷 相册',
              url: '/templates/photos.html',
            },
            {
              title: '📑 标签博文列表',
              url: '/templates/catalog.html',
            },
            {
              title: '📂 随笔分类',
              url: '/templates/category.html',
            },
            {
              title: '🔍 相册 - 照片预览',
              url: '/templates/photoview.html',
            },
            {
              title: '🔖 标签列表',
              url: '/templates/tags.html',
            },
            {
              title: '📚 随笔档案博文列表',
              url: '/templates/postarchive.html',
            },
          ]

          pageList.forEach((item) => {
            const navItem = createNavItem(item)
            this.content.querySelector('.page-list').appendHTML(navItem)
          })
        }

        render() {
          this.appendChild(this.content)
        }
      }

      window.customElements.define('aw-footer', AwFooter)
      window.customElements.define('aw-navlist', NavList)
    </script>
  </body>
</html>
